{% extends "geonode_base.html" %}
{% load i18n %}

{% block extra_script %}
<script>
    $(document).ready(function() {
       $('#choose-file').prop('disabled', false);
    });

   function chooseFile() {
      $("#id_file").click();
   }

   $("#id_file").on("change", function() {
     $("#uploads-new-form").submit();
    });

</script>

{{ block.super }}
{% endblock %}

{% block body_outer %}

<div class="page-header">
  <a href="{% url 'uploads-list' %}"><div class="pull-right" style="margin-top: 25px; font-size: 14px">Manage Your Data</div></a>
  <h2 class="page-title">{% trans "Add Data" %}</h2>
</div>

<div>
  <div class="row" style="margin:20px 0 30px">
	<form id="uploads-new-form" action="{% url 'uploads-new' %}" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <div style="height:0px;overflow:hidden">
            {{form}}
        </div>
        <div class="row">
            <button type="button" id="choose-file" class="btn-info col-md-4 btn" onclick="chooseFile();" disabled="disabled">choose file(s)</button>
        </div>
        <div class="row">
            <div class="errorlist">
            {% for error in form.file.errors %}
                <i class="fa fa-warning">  {{ error|escape }}</i>
            {% endfor %}
                <div class="col-md-6" style="padding-top: 5px; padding-left: 2px;">
                    Valid file extensions: {{ VALID_EXTENSIONS }}
                </div>
            </div>

        </div>
        </form>
	</div>
</div>


{% endblock %}
